<template>
    <div>
      <h2>添加用户</h2>
      <el-form :model="form" label-width="120px">
        <el-form-item label="姓名">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone" />
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.sex" placeholder="选择性别">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="出生年月">
          <el-date-picker v-model="form.birthday" type="date" placeholder="选择出生日期" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.note" />
        </el-form-item>
        <div class="form-actions">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="saveUser(false)">保存但暂不绑定会员卡</el-button>
          <el-button type="primary" @click="saveUser(true)">保存并绑定会员卡</el-button>
        </div>
      </el-form>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { SaveUserWithoutMembershipCard } from '@/api/AddUser';
  
  const router = useRouter();
  
  const form = ref({
    name: '',
    phone: '',
    sex: '',
    birthday: '',
    note: ''
  });
  
  const cancel = () => {
    router.push({ name: 'Membership' }); 
  };
  
  const saveUser = async (bindCard) => {
    try {
      // 发送数据到后台
      // await axios.post('/api/users', form.value);
      const response = await SaveUserWithoutMembershipCard(form.value);
      console.log(response)
      if (bindCard) {
        // 跳转到绑定会员卡页面
        router.push({ name: 'BindMembershipCard', params: { userId: 'new-user-id' } });
      } else {
        cancel(); // 保存后取消或跳转
      }
    } catch (error) {
      console.error('Error:', error);
      // 显示错误消息
    }
  };
  </script>
  